<template>
  <div class="search">
    <div class="content">
      <img src="../../../../assets/logo.png" class="logo">
      <div class="center-contend">
        <div class="center-contend-input">
          <jd-input></jd-input>
          <shopping-cart></shopping-cart>
        </div>
        <nav-items
          :worlds="worlds"
          :width="'550px'"
          :height="'20px'"
          :color="'#666666'"
          style="margin-bottom: 10px;margin-right: 150px"
        ></nav-items>
        <nav-items
          :worlds="worlds"
          width="750px"
          height="40px"
          fontSize="14"

        ></nav-items>
      </div>
      <div @mouseenter="isShowImhDetail=true" @mouseleave="isShowImhDetail=false">
        <img src="../../../../assets/download.png" class="downLoad" v-show="!isShowImhDetail" style="width: 76px">
        <img src="@/assets/download1.png" class="downLoad" v-show="isShowImhDetail">
      </div>
    </div>
  </div>
</template>

<script>
  import HotWords from './hot-words'
  import JdInput from './input'
  import NavItems from './nav-items'
  import ShoppingCart from './cart'
  import {HOT_WORLD} from '@util/constant'

  export default {
    name: "index",
    model: {},
    props: {},
    data() {
      return {
        isShowImhDetail: false,
        worlds:HOT_WORLD
      }
    },
    computed: {},
    components: {
      HotWords,
      JdInput,
      NavItems,
      ShoppingCart
    },
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .search {
    background-color: white;

    .content {
      margin: 0 125px;
      height: 140px;
      position: relative;

      .logo {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 10px;
      }

      .downLoad {
        position: absolute;
        /*width: 76px;*/
        max-width: 200px;
        right: 0;
        top: 10px;
      }

      .center-contend {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;

        &-input{
          display: flex;
          align-items: center;
          margin-top: 25px;
          width: 700px;
          justify-content: space-between;
        }
      }

      .shopping-cart {
        position: absolute;
        right: 230px;
        top: 25px;
      }

      .hot-words {
        padding-top: 20px;
      }
    }
  }
</style>
